<template>
	<view class="popup-overlay" v-if="show">
		<view class="popup">
			<view class="popup-header">
				<text class="title">{{ isEditMode ? '编辑面值' : '添加面值' }}</text>
				<view class="close-btn" @click.stop="closePopup">×</view>
			</view>
			<view class="popup-content">
				<input class="popup-input" type="number" placeholder="请输入面值" v-model="form.facevalue" />
				<input class="popup-input" type="number" placeholder="请输入售价" v-model="form.buyprice" />
				<input class="popup-input" type="text" placeholder="请输入套餐说明" v-model="form.remark" />
			</view>
			<button class="popup-button" @click="submitCard">
				{{ isEditMode ? '保存修改' : '添加面值' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			editCard: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				form: {
					facevalue: '',
					buyprice: '',
					remark: ''
				}
			};
		},
		computed: {
			isEditMode() {
				return this.editCard !== null;
			}
		},
		watch: {
			editCard: {
				handler(newVal) {
					if (newVal) {
						this.form = { ...newVal }; // 编辑时回填
					} else {
						this.form = this.getDefaultForm(); // 添加时初始化
					}
				},
				immediate: true
			}
		},
		methods: {
			getDefaultForm() {
				return {
					facevalue: '',
					buyprice: '',
					remark: ''
				};
			},
			closePopup() {
				this.$emit('update:show', false);
			},
			submitCard() {
				if (this.isEditMode) {
					this.updateData();
				} else {
					this.addData();
				}
			},
			addData() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.form.store_id = store_id;
					this.$api.post({
						url: '/Recharge/add',
						loadingTip: '添加中...',
						data: { ...this.form },
						success: res => {
							this.$emit('refreshData');
							this.closePopup();
						}
					});
				});
			},
			updateData() {
				this.$api.post({
					url: '/Recharge/edit',
					loadingTip: '保存中...',
					data: { ...this.form },
					success: res => {
						this.$emit('refreshData');
						this.closePopup();
					}
				});
			}
		}
	};
</script>

<style scoped>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.popup {
		background-color: #fff;
		width: 80%;
		border-radius: 10px;
		padding: 20px;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.close-btn {
		font-size: 24px;
		color: #999;
		cursor: pointer;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
	}

	.popup-input {
		margin-bottom: 20px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.popup-button {
		width: 100%;
		padding: 10px;
		background-color: #4CAF50;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.popup-button:hover {
		background-color: #45a049;
	}
</style>
